<template>
	<view class="mine-wrap page-bg content-20">
		<view class="current-phone desc">当前手机号： {{userInfo.userPhone | phonePartOf}}</view>
		<view class="form-wrap">
			<view :class="field==='phoneNumber'?'form-group form-group-active':'form-group'">
				<view class="form-group__title">新手机号</view>
				<view class="form-group__con">
					<input class="form-group__from" type="number" @focus="setField('phoneNumber')" @blur="setField('other')" maxlength="11" v-model="phoneNumber" placeholder="请输入11位手机号" placeholder-class="placeholder" />
				</view>
			</view>
			
			<sms-code :phoneNumber="phoneNumber" op='edit' @getCode='getCode' ></sms-code>
		</view>
		<view class="circular-submit" @click="formSubmit">确定更换</view>
	</view>
</template>

<script>
	import smsCode from '../../components/smsCode.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				userInfo: {},
				phoneNumber: '',
				smsCode: '',
				common,
				field: '', // 当前聚焦字段名称
				artFwxy: '',
				artYszz: ''
			}
		},
		
		onLoad() {
			this.userInfo = common.getUserInfo()
		},
		
		methods: {
			getArt(field) {
				api.getArtByCode({ artCode: common.artCode[field] }, res => {
					this.$data[field] = res
					if(this.popType === 1) {
						// 服务协议
						this.titleService = res.artTitle
						this.textService = res.artContent
					}else{
						this.titleRules = res.artTitle
						this.textRules = res.artContent
					}
				})
			},
			
			getCode(smsCode) {
				console.log(smsCode)
				this.smsCode = smsCode
			},
			
			setField(field) {
				this.field = field
			},
			
			// 登录
			formSubmit() {
				let { phoneNumber,smsCode } = this.$data
				if(!phoneNumber) { this.$showToast('请填写电话号码~'); return }
				if(!smsCode) { this.$showToast('请填写手机验证码~'); return }
				api.setUserPhoneAsync({ phoneNumber, smsCode, codeState: 1 }, () => {
					this.$updataUserInfo()
					this.$showToast('绑定手机号成功,页面即将返回~')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		},
		computed:{
			checkField: function() {
				if(this.phoneNumber && this.smsCode) { return true }
				return false
			}
		},
		components:{
			'sms-code': smsCode
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.form-wrap{
		margin: 30rpx 0 50rpx 0;
		.br;
	}
	.form-group__active{
		border-bottom: 2px solid @font-orange-color;
	}
	.form-group{
		position: relative;
	}
	.form-group::after{
		content: '';
		display: block;
		left: 0;
		bottom: 0;
		border-bottom: 1px solid @font-orange-color;
		width: 0%;
		position: absolute;
		transition: all 0.3s linear;
	}
	.form-group-active::after{
		width: 100%;
	}
</style>
